<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png" />
        <hello-world :msg.sync="msg">
            <div>我在这</div>
        </hello-world>
        <p>{{sum}}</p>
        <button @click="plus($event)">加1计算</button>
    </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { mapState } from 'vuex'

export default {
    name: 'Home',
    data () {
        return {
            sum: 0,
            msg: 'Welcome to Your Vue.js App'
        }
    },
    components: {
        HelloWorld
    },
    computed: {
        ...mapState(['list', 'num'])
    },
    created () {
        console.log(this.list, '1111')
        console.log(this.num, '2222')
    },
    methods: {
        getData (e) {
            console.log(e)
        },
        plus (e) {
            console.log(e)
            this.sum++
        }
    },
    watch: {
        sum (val, oldVal) {
            if (oldVal === 1) {

            } else {
                console.log(val, oldVal, '监听')
            }
        }
    }
}
</script>
